<template>
  <div class="App">
    <div v-if="isShow">
      <input ref="myInput" type="text" name id />
      <button>确认</button>
    </div>

    <div v-else>
      <span>{{ title }}</span>
      <button @click="fn">编辑</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "大标题",
      isShow: false
    };
  },
  methods: {
    fn() {
      this.isShow = true;
      // 1. Vue是异步更新DOM的
      // 2. 如果要在 DOM 更新之后在执行某些操作，可以使用 $nextTick（在 DOM 更新之后, 执行回调函数）
      // => 可以类比 js中强制渲染 offsetWidth、scrollTop等属性、async await修饰的操作进行记忆
      this.$nextTick(() => {
        this.$refs.myInput.focus();
      });
    }
  }
};
</script>

<style>
</style>